<template>
    <div class="floor tao-row" v-for="f in floors">
        <div class="floor-item d-flex justify-content-between">
            <div class="floor-item-left">
                <h2 class="floor-item-left-title">
                    <span :id="f.floor+'f'" class="floor-item-left-title-num">{{f.floor}}F</span>
                    <span class="floor-item-left-title-content">{{f.itemTypeName}}</span>
                </h2>
                <div class="floor-item-card d-flex justify-content-between">
                    <div class="card-big-img">
                        <router-link :to="`/ticketDesc?itemId=${f.items[0].id}`">
                            <img :src="f.items[0].imgUrl" alt="">
                            <div class="card-big-img-desc">
                                <h2>{{f.items[0].itemName}}</h2>
                                <p>{{f.items[0].minPrice}}元</p>
                            </div>
                        </router-link>
                    </div>
                    <ul class="card-list list-unstyled">
                        <li class="float-start" v-for="fi in f.items.slice(1)">
                            <div class="card-list-item d-flex">
                                <div class="card-list-item-img">
                                    <router-link :to="`/ticketDesc?itemId=${fi.id}`">    
                                        <img :src="fi.imgUrl" alt="">
                                    </router-link>
                                </div>
                                <div class="card-list-item-content">
                                    <h2>{{fi.itemName}}</h2>
                                    <p>{{fi.startTime}}~{{fi.endTime}}</p>
                                    <p>{{fi.address}}</p>
                                    <p>¥ {{fi.minPrice}}起</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="floor-item-right">
                <div class="floor-item-right-title">
                    <h2>热门演出排行</h2>
                    <router-link class="check-all" to="/">查看全部 >></router-link>
                </div>
                <div class="floor-item-right-rank">
                    <ul class="list-unstyled">
                        <li v-for="(h,index) in f.hot">
                            <router-link :to="'/ticketDesc?itemId='+h.id">
                                <span class="rank">{{index+1}}</span>
                                <a class="content" href="javascript:void(0);">{{h.itemName}}</a>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <transition name="fade">
        <Anchor show-ink v-show="showAnchor" :affix="false" style="width: 150px;position: fixed;top: 200px;left: 20px;z-index: 1000;">
            <AnchorLink v-for="f in floors" :key="f" :href="'#'+f.floor+'f'" :title="f.itemTypeName" />
        </Anchor>
    </transition>
</template>
<script>
export default {
    props:{
        floors:{
            type:Object
        }
    },
    data(){
        return {
            showAnchor:false
        };
    },
    mounted(){
        window.onscroll=(e)=>{
            if(window.scrollY>895){
                this.showAnchor=true;
            }else{
                this.showAnchor=false;
            }
        }
    }
}
</script>
<style>
    /* 组件样式 */
    .floor-item{
        margin-bottom: 30px;
    }
    .floor-item-left{
        width: 896px;
        background: #fff;
    }
    .floor-item-left-title{
        padding: 20px 0 20px 26px;
    }
    .floor-item-left-title .floor-item-left-title-num{
        font-size: 18px;
        color: #ff3c1b;
        font-weight: bold;
        padding-right: 5px;
    }
    .floor-item-left-title .floor-item-left-title-content{
        font-size: 16px;
        font-weight: 400;
    }
    .floor-item-card{
        padding: 0 20px 40px 26px;
    }
    .floor-item-card .card-big-img{
        width: 238px;
        height: 364px;
        position: relative;
    }
    .floor-item-card .card-big-img img{
        width: 238px;
        height: 364px;
    }
    .floor-item-card .card-big-img .card-big-img-desc{
        width: 238px;
        height: 112px;
        padding: 20px;
        position: absolute;
        bottom: 0;
        color: #fff;
        background-color: rgba(184, 43, 19, 0.9);
    }
    .floor-item-card .card-big-img .card-big-img-desc h2,
    .floor-item-card .card-big-img .card-big-img-desc p
    {
        font-size: 12px;
    }
    .floor-item-card .card-big-img .card-big-img-desc p{
        margin-top: 10px;
    }
    .floor-item-card .card-list{
        width: 578px;
    }
    .floor-item-card .card-list li{
        width: 50%;
        margin-bottom: 54px;
    }
    .floor-item-card .card-list li:nth-last-of-type(2){
        margin-bottom: 0;
    }
    .floor-item-card .card-list li:nth-last-of-type(1){
        margin-bottom: 0;
    }
    .floor-item .card-list .card-list-item-img img{
        width: 112px;
        height: 150px;
    }
    .floor-item .card-list-item-content{
        width: 156px;
        margin-left: 8px;
    }
    .floor-item .card-list-item-content h2{
        font-weight: bold;
        margin-bottom: 40px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }
    .floor-item .card-list-item-content p{
        line-height: 28px;
        width: 156px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .floor-item-right{
        background-color: #fff;
        width: 280px;
        padding: 6px 24px 24px 26px;
    }
    .floor-item-right-title{
        margin-top: 10px;
        position: relative;
    }
    .floor-item-right-title h2{
        font-size: 14px;
        line-height: 44px;
    }
    .floor-item-right-title .check-all{
        position:absolute;
        right: 0;
        top: 0;
        font-size: 12px;
        color: #515a6e;
    }
    .floor-item-right-rank{
        margin-top: 6px;
        margin-bottom: 10px;
    }
    .floor-item-right-rank li{
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .floor-item-right-rank li .rank{
        padding: 0 5px;
        color: #fff;
        background-color: gray;
    }
    .floor-item-right-rank li:nth-of-type(1) .rank{
        background-color: #ff3c1b;
    }
    .floor-item-right-rank li:nth-of-type(2) .rank{
        background-color: #ff3c1b;
    }
    .floor-item-right-rank li:nth-of-type(3) .rank{
        background-color: #ff3c1b;
    }
    .floor-item-right-rank li .content{
        padding-left: 6px;
        color: #1b1b1b;
    }
    .floor-item-right-rank li:hover .content{
        color: #2D8cF0;
    }    
</style>